<div class="card-container ">
  <div class="card">
    <div class="front bg-cyan">

      <!-- row -->
      <div class="row">
        <div class="col-md-6">
          <i class="fa fa-{{setting.front.icon}} fa-4x"></i>
        </div>
        <div class="col-md-6">
          <p class="text-elg text-strong text-center mb-0">{{setting.front.title}}</p>
          <p class="text-center text-strong">{{setting.front.subTitle}}</p>
        </div>
      </div>

    </div>
    <div class="back bg-greensea dk">
      <!-- row -->
      <div class="row">
        <!-- col -->

        <div class="col-md-4" *ngFor="let item of setting.back">
          <!-- <a routerLink="{{item.router}}" (click)="onBackItemClicked({{item}})"><i class="fa fa-{{item.icon}} fa-2x"></i> {{item.title}}</a> -->
          <a href=javascript:; (click)="onBackItemClicked(item)"><i class="fa fa-{{item.icon}} fa-2x"></i> {{item.title}}</a>
        </div>
      </div>
    </div>
  </div>
</div>